<template>
  <div class="container">
    <el-page-header @back="goBack" title="曝光台" style="padding: 10px 20px" />
    <!--    表单区域-->
    <el-form :model="exposeForm">
      <el-form-item label="标题" label-width="80px">
        <el-input
          style="width: 300px"
          size="small"
          v-model="exposeForm.title"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="标签" label-width="80px">
        <el-select
          v-model="exposeForm.tag"
          multiple
          class="m-2"
          placeholder="请选择标签"
          size="small"
          style="width: 300px"
        >
          <el-option
            v-for="item in tagOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内容" label-width="80px" prop="content">
        <MyEditor
          ref="editorExpose"
          :value="exposeForm.content"
          v-model="exposeForm.content"
        ></MyEditor>
      </el-form-item>
      <el-form-item label-width="80px">
        <el-button type="success" size="small" @click="submit">提交</el-button>
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import {
  tagsList,
  addExpose,
  exposeInfo,
  updateExpose,
} from "@/api/message/expose";
const router = useRouter();
import MyEditor from "../../../components/MyEditor";
import { ElMessage } from "element-plus";
function goBack() {
  router.push({
    name: "expose",
  });
}
//表单数据
const exposeForm = ref({});
//标签数据
const tagOptions = ref([]);
//获取标签数据
function getTagList() {
  tagsList().then((res) => {
    tagOptions.value = res.data;
  });
}
//富文本标识
const editorExpose = ref(null);
//提交
function submit() {
  //添加
  if (!exposeId.value) {
    addExpose({
      content: editorExpose.value.textContent,
      tags: exposeForm.value.tag,
      title: exposeForm.value.title,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("添加成功");
        goBack();
      }
    });
  } else {
    updateExpose({
      content: editorExpose.value.textContent,
      tags: exposeForm.value.tag,
      title: exposeForm.value.title,
      id: exposeId.value,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("更新成功");
        goBack();
      }
    });
  }
}
//获取详细信息
function getExposeInfo() {
  exposeInfo(exposeId.value).then((res) => {
    exposeForm.value = res.data;
    exposeForm.value.tag = res.data.tags.map((item) => item.id);
  });
}
//曝光台Id
const exposeId = ref("");
const route = useRoute();
onMounted(() => {
  getTagList();
  exposeId.value = route.query.id;
  if (exposeId.value) {
    getExposeInfo();
  }
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 220px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
}
</style>
